import Checkbox from "ant-design-vue/es/checkbox";
import "ant-design-vue/lib/checkbox/style/css";

export default {
  name: "FormCheckbox",
  props: {
    option: {
      type: Object,
      default() {
        return {};
      }
    },
    value: [Number, String, Boolean]
  },
  model: {
    prop: "value",
    event: "updata"
  },
  data() {
    return {};
  },
  mounted() {
    if (!this.value) {
      const falseValue =
        this.option.falseValue || this.option.falseValue === 0
          ? this.option.falseValue
          : false;

      this.$emit("updata", falseValue);
      this.$emit("change", falseValue);
    }
  },
  methods: {
    onChange(e) {
      const checked = e.target.checked;
      const trueValue = this.option.trueValue ? this.option.trueValue : true;
      const falseValue =
        this.option.falseValue || this.option.falseValue === 0
          ? this.option.falseValue
          : false;
      const val = checked ? trueValue : falseValue;
      this.$emit("updata", val);
      this.$emit("change", val);
    }
  },
  render() {
    const that = this;
    const props = {
      ref: "formInput",
      props: {
        ...this.option.props
      },
      on: {
        change: e => {
          that.onChange(e);
        },
        focus: e => {
          this.$emit("focus", e);
        },
        blur: e => {
          this.$emit("blur", e);
        }
      }
    };

    if (this.value) {
      props.props.value = this.value;
    }

    return <Checkbox {...props} />;
  }
};
